<template>
  <div class="driver-manage-container">
    <div class="all-header">
      <div class="current-header">
        <div class="header-left">
          <img class="driver-logo" :src="basicSettingData?.logoImg || DefaultLogo" alt="" />
          <!-- <div class="driver-name">绿通驾</div> -->
        </div>
        <div class="header-right">
          <el-popover ref="userMenuPopover" placement="bottom-end" :width="240" :hide-after="0" :offset="10"
            trigger="hover" :show-arrow="false" popper-class="user-menu-popover"
            popper-style="border: 1px solid var(--art-border-dashed-color); border-radius: calc(var(--custom-radius) / 2 + 4px); padding: 5px 16px; 5px 16px;">
            <template #reference>
              <div style="display: flex; justify-content: center; align-items: center">
                <img class="cover" :src="userInfo.avatar || userDefaultAvatar" />
                <div>{{ userInfo.name }}</div>
                <el-icon>
                  <CaretBottom />
                </el-icon>
              </div>
            </template>
            <template #default>
              <div class="user-menu-box">
                <div class="user-head">
                  <img class="cover" :src="userInfo.avatar || userDefaultAvatar" style="float: left" />
                  <div class="user-wrap">
                    <span class="name">{{ userInfo.username }}</span>
                    <span class="email" v-if="userInfo.email">{{ userInfo.email }}</span>
                    <span> ID: {{ userInfo.id }}</span>
                  </div>
                </div>
                <ul class="user-menu">
                  <li @click="goPage('/drivingSchoolConsole/set')">
                    <i class="menu-icon iconfont-sys">&#xe755;</i>
                    <span class="menu-txt">{{ $t('topBar.user.userSet') }}</span>
                  </li>
                  <div class="line"></div>
                  <div class="logout-btn" @click="loginOut">
                    {{ $t('topBar.user.logout') }}
                  </div>
                </ul>
              </div>
            </template>
          </el-popover>
        </div>
      </div>
    </div>

    <div class="driver-container">
      <div class="content-list-container">
        <div class="content-list">
          <div class="list-title">驾校列表</div>
          <div class="list-content">
            <div @click="handleGoToDriver(item)" class="list-item" v-for="(item, index) in driverData" :key="index">
              <div class="top-header"></div>
              <div class="list-item-content">
                <div class="item-top">
                  <div class="left">
                    <div class="item-image">
                      <img :src="item.storeLogo" alt="" />
                    </div>
                    <div class="item-name">{{ item.storeName }}</div>
                    <el-tag round effect="light" v-if="item.status == 1" type="success">正常</el-tag>
                    <el-tag round effect="light" v-if="item.status == 2" type="info">已到期</el-tag>
                    <el-tag round effect="light" v-if="item.status == 0" type="danger">已禁用</el-tag>
                    <el-tag round effect="light" v-if="item.status == 3" type="primary">待审核</el-tag>
                    <el-tag round effect="light" v-if="item.status == 5" type="info">待支付</el-tag>

                    <el-tooltip effect="light" placement="top" :content="`拒绝原因：${item.refuseReason}`"
                      v-if="item.status == 4">
                      <el-tag round effect="light" type="danger">已拒绝</el-tag>
                    </el-tooltip>
                  </div>
                  <div class="item-delete" @click.stop="handleDelete(item.id)">
                    <i class="menu-icon iconfont-sys">&#xe850;</i>
                  </div>
                </div>
                <div class="item-bottom">
                  <div>
                    <div>
                      <span>有效期至：{{ item.thaliTime }}</span>
                      <a v-if="[1, 2].includes(item.status)" style="color: var(--el-color-primary); margin-left: 10px"
                        @click.stop="handleRenewal(item)">续费</a>
                    </div>
                    <div class="bottom-text"> 版本：{{ item.thaliName }} </div>
                    <div class="bottom-text"> ID：{{ item.id }} </div>
                  </div>
                  <!--                  <div class="edit" @click.stop="handleEdit(item)" v-if="item.status === 4">-->
                  <!--                    <i class="menu-icon iconfont-sys">&#xe705;</i>-->
                  <!--                  </div>-->
                  <!--                  <div v-else></div>-->
                </div>
                <div class="btn">{{ item.status === 5 ? '立即支付' : '进入驾校' }}</div>
              </div>
            </div>

            <div class="add-jiaxiao" @click="handleAdd"
              v-if="userStore.info?.roles && userStore.info.roles[0] === 'super_admin'">
              <div class="add-icon">
                <el-icon size="18">
                  <Plus />
                </el-icon>
                <div class="add-text">创建驾校</div>
              </div>
            </div>
          </div>
          <div class="recycle-bin" v-if="userStore.info?.roles && userStore.info.roles[0] === 'super_admin'">
            <i class="iconfont-sys del-icon">&#xe783;</i>
            回收站
          </div>
          <div class="list-content" v-if="userStore.info?.roles && userStore.info.roles[0] === 'super_admin'">
            <div @click="handleRecover(item.id)" class="list-item" v-for="(item, index) in deleteDriverData"
              :key="index">
              <div class="top-header"></div>
              <div class="list-item-content">
                <div class="item-top">
                  <div class="left">
                    <div class="item-image">
                      <img :src="item.storeLogo" alt="" />
                    </div>
                    <div class="item-name">{{ item.storeName }}</div>
                    <el-tag round effect="light" v-if="item.status == 1" type="success">正常</el-tag>
                    <el-tag round effect="light" v-if="item.status == 2" type="info">已到期</el-tag>
                    <el-tag round effect="light" v-if="item.status == 0" type="danger">已禁用</el-tag>
                    <el-tag round effect="light" v-if="item.status == 3" type="primary">待审核</el-tag>
                    <el-tag round effect="light" v-if="item.status == 5" type="info">待支付</el-tag>

                    <el-tooltip effect="light" placement="top" :content="`拒绝原因：${item.refuseReason}`"
                      v-if="item.status == 4">
                      <el-tag round effect="light" type="danger">已拒绝</el-tag>
                    </el-tooltip>
                  </div>
                  <div class="item-delete" @click.stop="handleCompleteDelete(item.id)">
                    <i class="menu-icon iconfont-sys">&#xe850;</i>
                  </div>
                </div>
                <div class="item-bottom">
                  <div>
                    <div>有效期至：{{ item.thaliTime }}</div>
                    <div class="bottom-text"> 版本：{{ item.thaliName }} </div>
                    <div class="bottom-text"> ID：{{ item.id }} </div>
                  </div>
                  <!--                  <div class="edit" @click.stop="handleEdit(item)" v-if="item.status === 4">-->
                  <!--                    <i class="menu-icon iconfont-sys">&#xe705;</i>-->
                  <!--                  </div>-->
                  <!--                  <div v-else></div>-->
                </div>
                <div class="btn">恢复</div>
              </div>
            </div>
          </div>
        </div>
        <div class="right-other">
          <div style="height: 160px">
            <el-carousel height="160px">
              <el-carousel-item v-for="(val, index) in dsNotice" :key="index" style="height: 160px">
                <img :src="val.img" alt="" style="width: 100%; height: 100%; object-fit: contain" />
              </el-carousel-item>
            </el-carousel>
          </div>
          <!-- <div class="lunbo">
            <el-carousel height="auto">
              <el-carousel-item v-for="(val, index) in dsNotice" :key="index">
                <div
                  style="
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <img
                    :src="val.img"
                    alt=""
                    style="width: 100%; height: 100%; object-fit: contain"
                  />
                </div>
              </el-carousel-item>
            </el-carousel>
          </div> -->

          <div class="ohter-list">
            <div class="list-item">
              <div class="list-item-img">
                <img src="@/assets/img/service.png" alt="" />
              </div>

              <div class="list-item-kefu">
                <div style="font-weight: 600; font-size: 18px; color: #202124">{{
                  customerInfo.customerName
                }}</div>
                <div class="zaixain-line" style="font-size: 14px; color: #85888e">在线时间：{{ customerInfo.publicizeDesc }}
                </div>
              </div>
            </div>

            <div class="list-item">
              <div class="list-item-zixun">
                <div class="zixun-left">
                  <div style="color: #85888e; font-size: 14px; margin-bottom: 8px">关注我们</div>
                  <div class="wx-box">
                    <div>关注微信公众号</div>
                    <el-icon>
                      <ArrowRightBold />
                    </el-icon>
                    <div class="wx-gzh">
                      <div class="scan">
                        <img class="qrcode" :src="customerInfo.wxUrl" />
                        <div class="qrcode-text">企业微信扫一扫</div>
                      </div>
                      <div class="scan">
                        <img class="qrcode" :src="customerInfo.pubUrl" />
                        <div class="qrcode-text">微信公众号扫一扫</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="list-item">
              <div class="list-itme-phone">
                <div style="color: #85888e; font-size: 14px; margin-bottom: 8px">客服电话</div>
                <div style="font-weight: 700; font-size: 20px; color: #202124">{{
                  customerInfo.mobile
                }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="protocol">
      <div class="line"></div>
      <div class="text2">全面赋能驾校降本增效，全方位提升驾校数字化运营管理</div>
      <div class="line"></div>
    </div>

    <!-- <div class="driver-list-container">
        <div class="list-title">驾校列表</div>
    </div>

    <div class="driver-right-container"></div> -->
    <edit-dialog v-if="showEditDialog" :edit-dialog-visible="showEditDialog" :edit-info="editData"
      @close-dialog="handleCloseEditDialog"></edit-dialog>
  </div>
</template>

<script setup lang="ts">
import userDefaultAvatar from '@/assets/img/user_logo.jpg'
import DefaultLogo from '@/assets/img/drivingSchoolLogo.png'
import editDialog from './components/editDrivingScholDialog.vue'
import { useUserStore } from '@/store/modules/user'
import { ElMessageBox } from 'element-plus'
import { HOME_PAGE } from '@/router/routesAlias'
import { useI18n } from 'vue-i18n'
import { DriverSchool } from '@/api/driverSchoolApi'
import {
  getCustomerInfo,
  getAddStatus,
  deleteDrivingSchool,
  loginLogs,
  completelyDeleteDrivingSchool,
  restoreDrivingSchool
} from '@/api/ApiList'

import { useTemporaryStore } from '@/store/modules/temporary'
const useTemporaryData = useTemporaryStore()

const { t } = useI18n()

const userStore = useUserStore()

const router = useRouter()

const userMenuPopover = ref()
const userInfo = computed(() => userStore.getUserInfo)
const userId = userInfo.value.id
const driverData: any = ref([])
const dsNotice: any = ref([])
const isCanAdd = ref()
const showEditDialog = ref(false)
const editData = ref({})
const basicSettingData = ref()
const deleteDriverData: any = ref([])

const customerInfo = ref({
  customerName: '',
  publicizeDesc: '',
  pubUrl: '',
  wxUrl: '',
  phone: '',
  mobile: ''
})

const driverList = async () => {
  const res = await DriverSchool.driverSchoolList({ userId, isDeleted: 0 })
  driverData.value = res.data && res.data.list
}

const deleteDriverList = async () => {
  const res = await DriverSchool.driverSchoolList({ userId, isDeleted: 1 })
  deleteDriverData.value = res.data && res.data.list
}

const driverNotices = async () => {
  const res = await DriverSchool.dsNotices({ status: 1, type: 3 })
  dsNotice.value = res.data.list
}

async function getCustomerData() {
  let id: string = userInfo.value.id + ''
  const res = await getCustomerInfo(id)
  if (res.code === '00000' && res.data) {
    customerInfo.value = res.data
  }
}

async function canAdd() {
  const res = await getAddStatus()
  if (res.code === '00000') {
    isCanAdd.value = res.data
  }
}

function handleDelete(delId: string) {
  ElMessageBox.confirm('确认删除此驾校?', '警告', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      handleDel(delId)
    })
    .catch(() => { })
}

// function handleEdit(item: object) {
//   showEditDialog.value = true
//   editData.value = JSON.parse(JSON.stringify(item))
// }

function handleCloseEditDialog(value: boolean) {
  if (value) {
    driverList()
  }
  showEditDialog.value = false
}

function handleAdd() {
  if (!isCanAdd.value) {
    ElMessage.info('该账号已达到创建驾校数量上限！')
    return
  }
  useTemporaryData.setDrivingSchoolInfo({})
  useTemporaryData.setPayOrder('')
  useTemporaryData.setChooseDrivingSchoolCombo({})
  goPage('/drivingSchoolConsole/add')
}

async function handleDel(id: string) {
  const res = await deleteDrivingSchool(id)
  if (res.code === '00000') {
    ElMessage.success('删除成功')
    await driverList()
    await deleteDriverList()
  }
}

const goPage = (path: string) => {
  router.push(path)
}

// 暂时的跳转到首页
const handleGoToDriver = async (item: any) => {
  if (item.status === 1) {
    router.push(HOME_PAGE)
    localStorage.setItem('lty-store-id', item.id)
    await loginLogs()
  }
  if (item.status === 2) {
    ElMessage.info('该驾校已到期，请联系客服进行续费')
    return
  }

  if (item.status === 3) {
    ElMessage.info('正在审核中，请稍后重试')
    return
  }

  if (item.status === 4) {
    ElMessage.info(`已被拒绝，拒绝原因：${item.refuseReason}`)
    return
  }

  if (item.status === 0) {
    ElMessage.info('改驾校已被禁用，详细情况请来联系客服')
    return
  }

  if (item.status === 5) {
    useTemporaryData.setDrivingSchoolInfo(item)
    useTemporaryData.setPayOrder(item.orderNo)
    useTemporaryData.setChooseDrivingSchoolCombo(item)

    router.push(`/drivingSchoolConsole/add?step=3`)
  }
}

function handleRenewal(item: any) {
  useTemporaryData.setDrivingSchoolInfo(item)
  useTemporaryData.setPayOrder(item.orderNo)
  useTemporaryData.setChooseDrivingSchoolCombo(item)

  router.push(`/drivingSchoolConsole/add?step=2&isRenewal=1`)
}

async function handleDeleteDrivingSchool(id: string) {
  try {
    const res = await completelyDeleteDrivingSchool(id)
    if (res.code === '00000') {
      ElMessage.success('删除成功')
      await deleteDriverList()
    }
  } catch {
  } finally {
  }
}

function handleCompleteDelete(id: string) {
  ElMessageBox.confirm('确定彻底删除吗？', '确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    handleDeleteDrivingSchool(id)
  })
}

function handleRecover(id: string) {
  ElMessageBox.confirm('确定恢复吗？', '确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    handleRecoverDeleteDrivingSchool(id)
  })
}

async function handleRecoverDeleteDrivingSchool(id: string) {
  try {
    const res = await restoreDrivingSchool(id)
    if (res.code === '00000') {
      ElMessage.success('恢复成功')
      await driverList()
      await deleteDriverList()
    }
  } catch {
  } finally {
  }
}

const closeUserMenu = () => {
  setTimeout(() => {
    userMenuPopover.value.hide()
  }, 100)
}

const loginOut = () => {
  closeUserMenu()
  setTimeout(() => {
    ElMessageBox.confirm(t('common.logOutTips'), t('common.tips'), {
      confirmButtonText: t('common.confirm'),
      cancelButtonText: t('common.cancel'),
      customClass: 'login-out-dialog'
    }).then(() => {
      userStore.logOut()
    })
  }, 200)
}
onMounted(() => {
  driverList()
  deleteDriverList()
  driverNotices()
  getCustomerData()
  canAdd()

  let basicSettingInfo = JSON.parse(localStorage.getItem('lty-website-basic-type') || '{}')
  if (basicSettingInfo.title) {
    basicSettingData.value = basicSettingInfo
  }
})
</script>

<style lang="scss" scoped>
@use './style';

.driver-manage-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  .all-header {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-height: 80px;
    // margin-bottom: 50px;
    border-bottom: 1px solid #f5f7fa;

    .current-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 1400px;
      height: 80px;

      .header-left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 100%;
        width: 130px;

        .driver-logo {
          height: 42px;
        }

        .driver-name {
          font-size: 20px;
        }
      }

      .header-right {
        display: flex;
        justify-content: center;
        align-items: center;

        .cover {
          width: 30px;
          height: 30px;
          margin: 0 10px 0 0;
          overflow: hidden;
          background: #eee;
          border-radius: 50%;
        }
      }
    }
  }

  .driver-container {
    // display: flex;
    // justify-content: center;
    flex: 1;
    padding-top: 32px;
    width: 100%;
    background-color: #f5f7fa;
    height: calc(100vh - 160px);
    overflow-y: auto;

    .content-list-container {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      width: 1400px;
      margin: 0 auto;

      .content-list {
        width: 1100px;

        .list-title {
          display: flex;
          justify-content: flex-start;
          text-align: left;
          width: 100%;
          font-size: 24px;
          font-family:
            PingFangSC-Medium,
            PingFang SC;
          font-weight: 500;
          color: #202124;
          line-height: 24px;
          height: 24px;
          margin-bottom: 32px;
        }

        .list-content {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          flex-wrap: wrap;
          width: 100%;

          .list-item {
            position: relative;
            width: 340px;
            min-height: 240px;

            background: rgb(255, 255, 255);
            border-radius: 8px;
            border: 1px solid #ebebeb;

            margin-right: 20px;
            margin-bottom: 36px;
            // padding: 21px 14px 16px 24px;
            cursor: pointer;
            //   border: 1px solid #bbb;
            transition: transform 0.3s ease;

            .top-header {
              width: 100%;
              height: 4px;
              border-top-right-radius: 8px;
              border-top-left-radius: 8px;
              background: var(--el-color-primary);
            }

            .list-item-content {
              padding: 24px;
              cursor: pointer;
            }

            .item-top {
              display: flex;
              justify-content: space-between;
              align-items: center;
              width: 100%;

              .left {
                display: flex;
                align-items: center;
                flex: 1;

                .item-image {
                  margin-right: 12px;
                  width: 30px;
                  height: 30px;

                  img {
                    width: 100%;
                    height: 100%;
                    border-radius: 100%;
                  }
                }

                .item-name {
                  width: 150px;
                  height: 100%;
                  line-height: 100%;
                  color: #333;
                  font-weight: bold;
                  margin-right: 12px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }

                .item-other {
                  width: 28px;
                  height: 24px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  font-size: 12px;
                  border-radius: 15px;
                  padding: 0 6px;
                  border: 1px solid var(--el-color-primary);
                  color: var(--el-color-primary);
                }
              }

              .item-delete {
                width: 20px;
                color: grey;
                display: none;
              }
            }

            .item-bottom {
              padding-top: 24px;
              font-size: 14px;
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .edit {
                color: var(--el-color-primary);
              }

              .bottom-text {
                color: #60646b;
                word-wrap: break-word;
                margin-top: 6px;
              }
            }

            .btn {
              width: 100%;
              height: 40px;
              line-height: 40px;
              font-size: 14px;
              background-color: #fafafa;
              color: #ccc;
              border-radius: 4px;
              display: flex;
              justify-content: center;
              margin-top: 16px;
            }
          }

          .list-item:hover {
            box-shadow: 2px 5px 20px #dbdbdb;
            transform: translateY(-8px);

            .item-delete {
              display: block;
            }

            .btn {
              color: var(--el-color-primary);
              background-color: var(--el-color-primary-light-9);
            }
          }

          .add-jiaxiao {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 340px;
            height: 238px;
            border: 2px dashed var(--el-color-primary);
            border-radius: 8px;
            background-color: #fff;
            transition: transform 0.3s ease;
            cursor: pointer;
            margin-bottom: 30px;

            .add-icon {
              display: flex;
              align-items: center;
              color: var(--el-color-primary);
            }

            .add-text {
              font-size: 16px;
              margin-left: 10px;
            }

            &:hover {
              box-shadow: 2px 5px 20px #dbdbdb;
              transform: translateY(-8px);
            }
          }
        }

        .recycle-bin {
          display: flex;
          align-items: center;
          font-size: 24px;
          font-family:
            PingFangSC-Medium,
            PingFang SC;
          font-weight: 500;
          color: #202124;
          margin-bottom: 30px;

          .del-icon {
            font-size: 24px;
            margin-right: 8px;
          }
        }
      }

      .right-other {
        width: 300px;
        // background-color: #f6f9ff;
        border-radius: 8px;
        background: linear-gradient(#e9f8f5, #fff);

        .lunbo {
          background-color: #0265ff;
          width: 100%;
          min-height: 100px;
        }

        .ohter-list {
          box-sizing: border-box;
          padding: 24px 20px;
          width: 100%;

          .list-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            margin-bottom: 24px;
            width: 100%;
            height: 72px;
            border-bottom: 1px solid #eceef2;

            .list-item-img {
              margin-right: 8px;
              width: 48px;
              height: 48px;
              border-radius: 100%;
              overflow: hidden;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .list-item-kefu {
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              align-items: flex-start;
              height: 50px;

              .zaixain-line {
                color: #b8b8b8;
              }
            }

            // 第二行
            .list-item-zixun {
              display: flex;
              justify-content: space-between;
              align-items: center;
              width: 100%;

              .zixun-left {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;
                width: 100%;
                height: 100%;

                .wx-box {
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  font-weight: 700;
                  font-size: 18px;
                  color: #202124;
                  position: relative;

                  .wx-gzh {
                    left: 290px;
                    top: -140px;
                    width: 204px;
                    height: 360px;
                    transition: allease 0.3s;
                    background: #fff;
                    box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.07);
                    border-radius: 25px;
                    position: absolute;
                    display: none;

                    .scan {
                      display: flex;
                      align-items: center;
                      flex-direction: column;
                      margin-top: 30px;

                      .qrcode {
                        width: 120px;
                        height: 120px;
                        // margin-bottom: 10px;
                      }

                      .qrcode-text {
                        font-size: 14px;
                        // margin-top: 6px;
                        font-weight: 500;
                      }
                    }
                  }

                  &:hover {
                    .wx-gzh {
                      display: block;
                    }
                  }
                }
              }
            }

            // 第三行
            .list-itme-phone {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: flex-start;
              width: 100%;
            }
          }
        }
      }
    }
  }

  .protocol {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #b2b2b2;
    background-color: #f5f7fa;
    max-height: 80px;
    font-size: 14px;

    .line {
      background-color: #b2b2b2;
      width: 60px;
      height: 1px;
    }

    .text2 {
      padding: 0 20px;
    }
  }
}
</style>
